<template>
	<el-card shadow="never" body-style="padding:0;">
		<el-row :gutter="20" class="statistics pa-2">
			<el-col :lg="6" :md="8" :sm="12" :xs="24">
				<div class="num">{{ moneyInfo.total || 0 }}</div>
				<div>总定金(元)</div>
			</el-col>
			<el-col :lg="6" :md="8" :sm="12" :xs="24">
				<div class="num">{{ moneyInfo.used || 0 }}</div>
				<div>已使用(元)</div>
			</el-col>
			<el-col :lg="6" :md="8" :sm="12" :xs="24">
				<div class="num">{{ moneyInfo.normal || 0 }}</div>
				<div>未使用(元)</div>
			</el-col>
			<el-col :lg="6" :md="8" :sm="12" :xs="24">
				<div class="num">{{ moneyInfo.back || 0 }}</div>
				<div>退回(元)</div>
			</el-col>
		</el-row>
		<div class="tab-card-pad">
			<el-tabs
				type="card"
				style="margin-top: -1px; margin-left: -1px"
				v-model="activeTab"
				@tab-click="tabClick"
			>
				<el-tab-pane
					v-for="tab in tabs"
					:key="tab.value"
					:label="tab.label"
					:name="tab.value"
				>
					<div>
						<transition name="fade-transform" mode="out-in">
							<keep-alive>
								<cl-crud v-if="tab.value == activeTab">
									<zm-table
										:columns="columns"
										:data="tab.list"
										:auth-height="false"
									>
										<template #column-cus_type="{ scope: { row } }">
											{{ row.cus_type | constFilter("CUS_TYPE") }}
										</template>
										<template #column-opt="{ scope: { row } }">
											<div v-if="!browser.isMobile">
												<template v-if="row.status == 0">
													<!-- <el-button
														type="warning"
														@click="xg(row)"
														v-auth="'store_cusdetail_xg'"
													>
														修改
													</el-button> -->
													<el-button
														type="primary"
														@click="onEdit(row)"
														v-auth="'store_cusdetail_djbj'"
													>
														编辑
													</el-button>
													<el-button
														type="danger"
														plain
														@click="openReturnDrawer(row)"
														v-if="
															$auth('store_cusdetail_djth') && !row.yn
														"
													>
														退回
													</el-button>
												</template>
												<template v-if="![0, 3, 1].includes(row.status)">
													<el-button
														type="primary"
														plain
														@click="openDetail(row)"
													>
														查看
													</el-button>
												</template>
												<template
													v-if="row.pre_yn == 0 || row.pre_yn == '驳回'"
												>
													<el-button
														type="danger"
														plain
														@click="openReturnDrawerAdr(row)"
														v-auth="'store_cusdetail_djth'"
													>
														重新退回
													</el-button>
													<!-- <el-button
														@click="onCancel(row)"
														v-auth="'store_cusdetail_djqx'"
														:disabled="(row.order_id !=='')"
														>取消</el-button
													> -->
												</template>
												<template>
													<el-button
														@click="onCancel(row)"
														v-auth="'store_cusdetail_djqx'"
														v-if="![3, 2].includes(row.status)"
														>取消</el-button
													>
												</template>
											</div>
											<div v-else>
												<el-dropdown class="ml-1" size="medium">
													<el-button>
														更多<i
															class="el-icon-arrow-down el-icon--right"
														/>
													</el-button>
													<el-dropdown-menu slot="dropdown">
														<template v-if="row.status == 0">
															<el-dropdown-item>
																<el-button
																	type="primary"
																	@click="onEdit(row)"
																	v-auth="'store_cusdetail_djbj'"
																>
																	编辑
																</el-button>
															</el-dropdown-item>
															<el-dropdown-item>
																<el-button
																	type="danger"
																	plain
																	@click="openReturnDrawer(row)"
																	v-if="
																		$auth(
																			'store_cusdetail_djth'
																		) && !row.yn
																	"
																>
																	退回
																</el-button>
															</el-dropdown-item>
														</template>

														<el-dropdown-item
															v-if="![0, 3, 1].includes(row.status)"
														>
															<el-button
																type="primary"
																plain
																@click="openDetail(row)"
															>
																查看
															</el-button>
														</el-dropdown-item>

														<el-dropdown-item
															v-if="
																row.pre_yn == 0 ||
																	row.pre_yn == '驳回'
															"
														>
															<el-button
																type="danger"
																plain
																@click="openReturnDrawerAdr(row)"
																v-auth="'store_cusdetail_djth'"
															>
																重新退回
															</el-button>
														</el-dropdown-item>

														<el-dropdown-item
															v-if="![3, 2].includes(row.status)"
															><el-button
																@click="onCancel(row)"
																v-auth="'store_cusdetail_djqx'"
																>取消</el-button
															></el-dropdown-item
														>
													</el-dropdown-menu>
												</el-dropdown>
											</div>
										</template>
										<cl-empty slot="empty" tips="暂无定金">
											<template #tips>
												<div v-if="!isInherit">
													该客户暂无定金,快给客户创建个定金吧！
													<br />
													<br />
													<el-button
														type="primary"
														:disabled="!!Number(detail.inherit_id)"
														@click="openEarnestForm"
													>
														立即下定
													</el-button>
												</div>
												<div v-else>该客户暂无定金</div>
											</template>
										</cl-empty>
									</zm-table>
								</cl-crud>
							</keep-alive>
						</transition>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>

		<earnest-form ref="form" :detail="detail" @confirm="refresh" />
		<earnest-return-form ref="returnForm" :detail="detail" @confirm="refresh" />
		<!-- 详情 -->
		<refund-detail ref="detail" />
		<!-- 修改弹框 -->
		<cl-dialog
			title="修改定金"
			:visible.sync="accountsVisible"
			width="500px"
			:props="{ appendToBody: true }"
		>
			<el-form ref="form" :model="form" :rules="rules" label-position="top">
				<el-form-item label="收取日期" prop="pay_date">
					<el-date-picker
						v-model="form.pay_date"
						placeholder="选择日期"
						style="width: 100%"
						value-format="yyyy-MM-dd"
						:picker-options="pickerOptions"
					/>
				</el-form-item>
				<el-form-item label="品牌" prop="bra_id">
					<cl-select
						v-model="form.bra_id"
						placeholder="请选择品牌"
						filterable
						style="width: 100%"
					>
						<el-option
							v-for="item in brandList"
							:key="item.bra_id"
							:label="item.bra_name"
							:value="item.bra_id"
						/>
					</cl-select>
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="accountsVisible = false">关闭</el-button>
				<el-button type="primary" @click="submit">确认</el-button>
			</template>
		</cl-dialog>
	</el-card>
</template>
<script>
// 定金表单
import EarnestForm from "./earnest-form";
import EarnestReturnForm from "./earnest-return-form";
import RefundDetail from "./refund-detail";
import { constFilter } from "@/filters";
import { mapState, mapGetters } from "vuex";
import dayjs from "dayjs";

export default {
	inject: ["parent"],
	components: {
		EarnestForm,
		EarnestReturnForm,
		RefundDetail
	},
	props: {
		detail: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {
			moneyInfo: {},
			activeTab: "999",
			tabs: [
				{ label: "全部", value: "999", list: [] },
				{ label: "已使用", value: "1", list: [] },
				{ label: "未使用", value: "0", list: [] },
				{ label: "退回", value: "5", list: [] }
			],
			columns: [
				{ label: "下定金时间", prop: "pay_date", width: 140 },
				{
					label: "门店",
					prop: "dept_name",
					minWidth: 150,
					align: "left",
					showOverflowTooltip: true
				},
				{ label: "定金类型", prop: "cus_type", width: 120 },
				{
					label: "支付类型",
					prop: "order_id",
					width: 120,
					formatter: row => (row.order_id !== "" ? "线上" : "线下")
				},
				{
					label: "品牌",
					prop: "bra_name",
					minWidth: 120,
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "金额",
					prop: "dep_amount",
					width: 120,
					formatter: row => `￥${row.dep_amount}`
				},
				{ label: "付款方式", prop: "pay_name", width: 100 },
				{
					label: "下定金人",
					prop: "user_name",
					minWidth: 150,
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "备注",
					prop: "dep_meno",
					minWidth: 150,
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "状态",
					prop: "status",
					minWidth: 120,
					formatter: row => constFilter(row.status, "DEPOSIT_STATUS")
				},
				{
					label: "操作",
					width: 300,
					prop: "opt",
					fixed: "right"
				}
			],
			accountsVisible: false,
			form: {
				dep_id: undefined,
				bra_id: "",
				pay_date: "",
				pay_type: "",
				dep_amount: "",
				dep_meno: "",
				is_join_settlement: 0,
				dept_id: ""
			},
			rules: {
				pay_date: [{ required: true, message: "请选择收取日期", trigger: "change" }],
				bra_id: [{ required: true, message: "请选择品牌", trigger: "change" }]
			},
			pickerOptions: {
				disabledDate(time) {
					let now = dayjs();
					let date = dayjs(time);
					return date.isAfter(now);
				}
			},
			brandList: [],
			depositConfigs: [],
			saving: false
		};
	},
	computed: {
		...mapGetters(["browser"]),
		isInherit() {
			const { inherit_id } = this.detail;
			return !!Number(inherit_id);
		}
	
	},
	mounted() {
		this.init();
	},
	methods: {
		openEarnestForm() {
			this.parent.openEarnestForm();
			// const { dept_id } = this.detail;
			// this.$refs.form.open(false,{dept_id});
		},
		init() {
			this.activeTab = "999";
			this.refresh();
		},
		refresh() {
			this.getDepositUser();
			this.getList();
		},
		tabClick(tab) {
			this.getList(tab.name);
		},
		async getDepositUser() {
			const { cus_id } = this.detail;
			const data = await this.$service.deposit.userInfo({
				cus_id
			});
			this.moneyInfo = data;
		},
		async getList(status = "999") {
			const { cus_id } = this.detail;
			const data = await this.$service.deposit.listuse({
				cus_id,
				status
			});
			let currIdx = this.tabs.findIndex(v => v.value == status);
			if(this.browser.isMobile){
				this.columns[this.columns.length -1].width = 120
			}
			this.tabs[currIdx].list = data;
		},
		onEdit(row) {
			this.$refs.form.open(true, row);
		},
		//查看
		openDetail(row) {
			this.$refs.detail.open(row);
		},
		// 取消
		onCancel(row) {
			this.confirm()
				.then(async () => {
					await this.$service.deposit.cancel(row.id);
					this.$message.success("操作成功");

					this.refresh();
				})
				.catch(() => {});
		},
		openReturnDrawer(row) {
			if (row.order_id) {
				this.$confirm("是否申请退定?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(() => {
					this.$service.deposit
						.refundusedepositOnline({ dep_id: row.dep_id })
						.done(() => {
							this.refresh();
						});
				});
				return;
			}
			this.$refs.returnForm.open(row);
		},
		openReturnDrawerAdr(row) {
			this.$service.deposit.adRefund({ dep_id: row.dep_id, yn: 1 }).done(() => {
				this.refresh();
			});
		},
		async xg(row) {
			Object.keys(this.form).forEach(k => {
				this.form[k] = row[k] ?? "";
			});
			this.form.dep_id = row.id;
			const { biz_id } = this.detail;
			this.brandList = await this.$store.dispatch("common/getBizBrands", {
				biz_id,
				needAll: false
			});
			this.depositConfigs = (await this.$service.deposit.configlists({ biz_id })) || [];

			this.accountsVisible = true;
		},
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				const { cus_id, biz_id } = this.detail;
				const { dep_amount, ...args } = this.form;
				let form = {
					...args,
					cus_id,
					biz_id,
					dep_amount
				};
				let deposit = this.depositConfigs.find(v => v.deposit == dep_amount);
				form.deposit_num = deposit.deposit_num;
				this.saving = true;
				await this.$service.deposit.edit(form).done(() => {
					this.saving = false;
				});
				this.$message.success("操作成功");
				this.init();
				this.accountsVisible = false;
			});
		}
	}
};
</script>
<style lang="scss" scoped>
::v-deep {
	.el-upload {
		background: #fff;
	}
	.cl-crud {
		padding: 10px 0;
	}
	// .el-tabs--card > .el-tabs__header .el-tabs__nav {
	// 	border-top: 0;
	// }
	// .el-tabs--card > .el-tabs__header .el-tabs__nav:first-child {
	// 	border-left: 0;
	// }
}
.tab-card-pad {
	margin: 10px 0 0 10px;
}
.statistics {
	border-bottom: 1px solid $border-main;
	.num {
		color: $color-danger !important;
	}
}
</style>
